<template>
  <div class="browserUpgrade">
    <div class="layout">
      <div class="top">

      </div>
      <div class="center">
        <h1>请升级您的浏览器</h1>
        <p>您的浏览器版本过低，为了更好的体验，请升级您的浏览器</p>
        <div  class="download">
          <ul>
            <li><a class="ico1" target="_blank" href="https://www.google.com/intl/zh-CN/chrome/browser/"></a></li>
            <li><a class="ico2" target="_blank" href="https://www.firefox.com.cn/"></a></li>
            <li><a class="ico3" target="_blank" href="https://www.opera.com/"></a></li>
            <li><a class="ico4" target="_blank" href="https://support.apple.com/kb/DL1531?viewlocale=zh_CN&amp;locale=zh_CN"></a></li>
            <li><a class="ico5" target="_blank" href="https://windows.microsoft.com/zh-cn/windows/upgrade-your-browser"></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.browserUpgrade{
  background: white;
  height: 100vh;
  .top{
    width: 206px;
    height: 180px;
    line-height: 180px;
    img{
      width: 100%;
    }
  }
  .center{
    text-align: center;
    padding: 50px 0 100px;
    h1{
      font-size: 30px;
      height: 50px;
      line-height: 50px;
      color: #ff6600;
    }
    p{
      margin-top: 5px;
      font-size: 14px;
      color: #989898;
    }
    .download{
      clear: both;
      overflow: hidden;
      zoom: 1;
      display: inline-block;
      margin-top: 20px;
      li{
        float:left;
        margin-right: 5px;
        a{
          display: block;
          width:60px;
          height:60px;
          background:url(~/static/images/liulanqi.gif) no-repeat;
        }
        .ico1{background-position:0 -205px;}
        .ico2{background-position:0 -138px;}
        .ico3{background-position:0 -68px;}
        .ico4{background-position:0 0;}
        .ico5{background-position:0 -275px;}
      }
    }
  }
}
</style>
